﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "班次日历";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>班次日历</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/layui/layui.js"></script>
    <style>
        body {
            padding: 15px;
            background-color: #f8f8f8;
        }
        .calendar-container {
            background-color: white;
            border-radius: 2px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            padding: 15px;
            max-width: 1400px;
            margin: 0 auto;
        }
        .calendar-header {
            padding: 10px 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
        }
        .month-title {
            font-size: 18px;
            font-weight: bold;
            padding: 10px 0;
        }
        .calendar-tabs {
            margin-bottom: 15px;
        }
        .calendar-nav {
            display: flex;
            align-items: center;
        }
        .calendar-nav a {
            padding: 5px 10px;
            color: #666;
        }
        .calendar-table {
            width: 100%;
            border-collapse: collapse;
        }
        .calendar-table th {
            height: 40px;
            text-align: center;
            border: 1px solid #eee;
            background-color: #fafafa;
            font-weight: normal;
            width: 14.28%;
        }
        .calendar-table td {
            height: 110px;
            border: 1px solid #eee;
            vertical-align: top;
            padding: 5px;
            position: relative;
            width: 14.28%;
        }
        .calendar-day {
            display: block;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 2px;
        }
        .calendar-lunar {
            font-size: 12px;
            color: #666;
        }
        .calendar-holiday {
            color: #ff5722;
        }
        .shift-badge {
            position: absolute;
            bottom: 5px;
            right: 5px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 3px;
            color: white;
            background-color: #1E9FFF;
        }
        .shift-badge.holiday {
            background-color: #5FB878;
        }
        .day-actions {
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .day-action {
            margin-bottom: 3px;
            font-size: 12px;
            padding: 2px 5px;
            border-radius: 2px;
            color: white;
            width: 80%;
            text-align: center;
        }
        .day-action.assign {
            background-color: #5FB878;
        }
        .day-action.hours {
            background-color: #FFB800;
        }
        .day-action.count {
            background-color: #999;
        }
        .calendar-today {
            background-color: #f5f5f5;
        }
        .worker-category {
            padding: 10px 0;
            margin-right: 15px;
            width: 100px;
        }
        .worker-category .layui-nav {
            background-color: white;
            width: 100px;
        }
        .worker-category .layui-nav-item a {
            color: #333;
        }
        .worker-category .layui-nav-item.layui-this a {
            background-color: #1E9FFF;
            color: white;
        }
        .main-content {
            display: flex;
        }
        .calendar-main {
            flex: 1;
            min-width: 0;
        }
    </style>
</head>
<body>
    <div class="calendar-container">
        <div class="calendar-tabs">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this">分类</li>
                    <li>班组</li>
                    <li>个人</li>
                </ul>
            </div>
        </div>
        
        <div class="main-content">
            <div class="worker-category">
                <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="worker-nav" style="width: 100px; margin-right: 15px;">
                    <li class="layui-nav-item"><a href="javascript:;">注塑</a></li>
                    <li class="layui-nav-item layui-this"><a href="javascript:;">机加工</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">组装</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">仓库</a></li>
                </ul>
            </div>
            
            <div class="calendar-main">
                <div class="calendar-header">
                    <div class="month-title">2025 年 5 月</div>
                    <div class="calendar-nav">
                        <a href="javascript:;" id="prevMonth"><i class="layui-icon layui-icon-left"></i> 上个月</a>
                        <a href="javascript:;" id="currentMonth">今天</a>
                        <a href="javascript:;" id="nextMonth">下个月 <i class="layui-icon layui-icon-right"></i></a>
                    </div>
                </div>
                
                <table class="calendar-table">
                    <thead>
                        <tr>
                            <th>一</th>
                            <th>二</th>
                            <th>三</th>
                            <th>四</th>
                            <th>五</th>
                            <th>六</th>
                            <th>日</th>
                        </tr>
                    </thead>
                    <tbody id="calendarBody">
                        <!-- 日历数据会在JS中动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <script>
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.jquery;
        
        // 模拟的农历数据
        var lunarData = {
            '2025-04-28': '四月初一',
            '2025-04-29': '四月初二',
            '2025-04-30': '四月初三',
            '2025-05-01': '四月初四',
            '2025-05-02': '四月初五',
            '2025-05-03': '四月初六',
            '2025-05-04': '四月初七',
            '2025-05-05': '立夏',
            '2025-05-06': '四月初九',
            '2025-05-07': '四月初十',
            '2025-05-08': '四月十一',
            '2025-05-09': '四月十二',
            '2025-05-10': '四月十三',
            '2025-05-11': '四月十四',
            '2025-05-12': '护士节',
            '2025-05-13': '四月十六',
            '2025-05-14': '四月十七',
            '2025-05-15': '四月十八',
            '2025-05-16': '四月十九',
            '2025-05-17': '四月二十',
            '2025-05-18': '四月廿一',
            '2025-05-19': '四月廿二',
            '2025-05-20': '四月廿三',
            '2025-05-21': '小满',
            '2025-05-22': '四月廿五',
            '2025-05-23': '四月廿六',
            '2025-05-24': '四月廿七',
            '2025-05-25': '四月廿八',
            '2025-05-26': '四月廿九',
            '2025-05-27': '五月初一',
            '2025-05-28': '五月初二',
            '2025-05-29': '五月初三',
            '2025-05-30': '五月初四',
            '2025-05-31': '端午节',
            '2025-06-01': '儿童节'
        };
        
        // 节假日数据
        var holidayData = {
            '2025-05-01': '劳动节',
            '2025-05-04': '青年节',
            '2025-05-12': '护士节',
            '2025-05-31': '端午节',
            '2025-06-01': '儿童节'
        };
        
        // 休息日数据
        var restDays = ['2025-05-13', '2025-05-14', '2025-05-31'];
        
        // 装配班组数据
        var assignDays = [
            '2025-05-31', 
            '2025-06-01', 
            '2025-06-02', 
            '2025-06-03', 
            '2025-06-04', 
            '2025-06-05', 
            '2025-06-06', 
            '2025-06-07', 
            '2025-06-08'
        ];
        
        // 初始化日历
        function initCalendar(year, month) {
            // 清空日历表格
            $("#calendarBody").empty();
            
            // 获取当前月的第一天
            var firstDay = new Date(year, month - 1, 1);
            // 获取当前月的最后一天
            var lastDay = new Date(year, month, 0);
            
            // 获取当前月第一天是星期几（0-6，0是星期日）
            var firstDayOfWeek = firstDay.getDay();
            if (firstDayOfWeek === 0) firstDayOfWeek = 7; // 调整星期日为7
            
            // 获取当前月的总天数
            var daysInMonth = lastDay.getDate();
            
            // 计算需要显示的行数
            var rows = Math.ceil((daysInMonth + firstDayOfWeek - 1) / 7);
            
            // 获取上个月的最后一天
            var prevMonthLastDay = new Date(year, month - 1, 0).getDate();
            
            var dayCount = 1;
            var nextMonthDay = 1;
            
            // 生成日历表格
            for (var i = 0; i < rows; i++) {
                var row = $("<tr></tr>");
                
                for (var j = 1; j <= 7; j++) {
                    var cell = $("<td></td>");
                    var cellIndex = i * 7 + j;
                    var dayNumber = cellIndex - firstDayOfWeek + 1;
                    
                    if (dayNumber <= 0) {
                        // 上个月的日期
                        var prevDate = prevMonthLastDay + dayNumber;
                        cell.append('<div class="calendar-day" style="color:#ccc;">' + prevDate + '</div>');
                        
                        var prevMonthStr = month - 1 === 0 ? year - 1 + '-12' : year + '-' + (month - 1).toString().padStart(2, '0');
                        var dateStr = prevMonthStr + '-' + prevDate.toString().padStart(2, '0');
                        
                        var lunar = lunarData[dateStr] || '';
                        if (lunar) {
                            cell.append('<div class="calendar-lunar" style="color:#ccc;">' + lunar + '</div>');
                        }
                    } else if (dayNumber <= daysInMonth) {
                        // 当前月的日期
                        cell.append('<div class="calendar-day">' + dayNumber + '</div>');
                        
                        var dateStr = year + '-' + month.toString().padStart(2, '0') + '-' + dayNumber.toString().padStart(2, '0');
                        
                        // 显示农历
                        var lunar = lunarData[dateStr] || '';
                        if (lunar) {
                            var lunarClass = holidayData[dateStr] ? 'calendar-lunar calendar-holiday' : 'calendar-lunar';
                            cell.append('<div class="' + lunarClass + '">' + lunar + '</div>');
                        }
                        
                        // 显示节假日
                        var holiday = holidayData[dateStr];
                        if (holiday) {
                            cell.append('<div class="calendar-holiday">' + holiday + '</div>');
                        }
                        
                        // 添加班次标识
                        var shiftClass = restDays.includes(dateStr) ? 'shift-badge holiday' : 'shift-badge';
                        cell.append('<div class="' + shiftClass + '">班</div>');
                        
                        // 添加额外的操作按钮
                        if (assignDays.includes(dateStr)) {
                            var actions = $('<div class="day-actions"></div>');
                            actions.append('<div class="day-action assign">装配班组</div>');
                            actions.append('<div class="day-action hours">333</div>');
                            actions.append('<div class="day-action count">21</div>');
                            cell.append(actions);
                        }
                    } else {
                        // 下个月的日期
                        cell.append('<div class="calendar-day" style="color:#ccc;">' + nextMonthDay + '</div>');
                        
                        var nextMonthStr = month + 1 === 13 ? year + 1 + '-01' : year + '-' + (month + 1).toString().padStart(2, '0');
                        var dateStr = nextMonthStr + '-' + nextMonthDay.toString().padStart(2, '0');
                        
                        var lunar = lunarData[dateStr] || '';
                        if (lunar) {
                            cell.append('<div class="calendar-lunar" style="color:#ccc;">' + lunar + '</div>');
                        }
                        
                        nextMonthDay++;
                    }
                    
                    row.append(cell);
                }
                
                $("#calendarBody").append(row);
            }
        }
        
        // 初始化日历，显示2025年5月
        initCalendar(2025, 5);
        
        // 上个月按钮点击事件
        $("#prevMonth").click(function() {
            var currentYearMonth = $(".month-title").text().split(' ');
            var year = parseInt(currentYearMonth[0]);
            var month = parseInt(currentYearMonth[2]);
            
            month--;
            if (month < 1) {
                month = 12;
                year--;
            }
            
            $(".month-title").text(year + ' 年 ' + month + ' 月');
            initCalendar(year, month);
        });
        
        // 今天按钮点击事件
        $("#currentMonth").click(function() {
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth() + 1;
            
            $(".month-title").text(year + ' 年 ' + month + ' 月');
            initCalendar(year, month);
        });
        
        // 下个月按钮点击事件
        $("#nextMonth").click(function() {
            var currentYearMonth = $(".month-title").text().split(' ');
            var year = parseInt(currentYearMonth[0]);
            var month = parseInt(currentYearMonth[2]);
            
            month++;
            if (month > 12) {
                month = 1;
                year++;
            }
            
            $(".month-title").text(year + ' 年 ' + month + ' 月');
            initCalendar(year, month);
        });
        
        // 解决导航菜单的样式问题
        $('.layui-nav-tree').css('background-color', '#fff');
        $('.layui-nav-tree .layui-nav-item a').css('color', '#333');
        $('.layui-nav-tree .layui-this a').css({
            'background-color': '#1E9FFF',
            'color': '#fff'
        });
    });
    </script>
</body>
</html>

